<script setup lang="ts">
import { ref } from 'vue'
import { NForm, NFormItem, NInput, NButton } from 'naive-ui'

const emits = defineEmits(['submit'])

const dicomSource = ref({
  wadoRsRoot: 'https://d3t6nz73ql33tx.cloudfront.net/dicomweb',
  StudyInstanceUID: '1.3.6.1.4.1.14519.5.2.1.7009.2403.334240657131972136850343327463',
  SeriesInstanceUID: '1.3.6.1.4.1.14519.5.2.1.7009.2403.226151125820845824875394858561'
})

const submit = () => {
  emits('submit', dicomSource.value)
}
</script>

<template>
  <div>
    <n-form ref="formRef" :model="dicomSource" :show-feedback="false">
      <n-form-item path="wadoRsRoot" label="wadoRsRoot">
        <n-input v-model:value="dicomSource.wadoRsRoot" @keydown.enter.prevent placeholder="wadoRsRoot" />
      </n-form-item>
      <n-form-item path="StudyInstanceUID" label="StudyInstanceUID">
        <n-input
          placeholder="StudyInstanceUID"
          v-model:value="dicomSource.StudyInstanceUID"
          @keydown.enter.prevent
        />
      </n-form-item>
      <n-form-item path="SeriesInstanceUID" label="SeriesInstanceUID">
        <n-input
          placeholder="SeriesInstanceUID"
          v-model:value="dicomSource.StudyInstanceUID"
          @keydown.enter.prevent
        />
      </n-form-item>
      <n-form-item>
        <n-button @click="submit">提交</n-button>
      </n-form-item>
    </n-form>
  </div>
</template>

<style scoped>

</style>
